<template>
    <view class="apply-pages" v-if="isLoad">
        <!-- <back></back> -->
        <view class="apply-form">
            <view class="fill-base pd-lg">
                <view class="flex-between b-1px-b">
                    <view class="item-text">支付宝账号</view>
                    <input
                        v-model="form.alipay_number"
                        type="text"
                        class="item-input flex-1"
                        :class="[{ 'mr-md': form.alipay_number }]"
                        maxlength="20"
                        :placeholder="rule[0].errorMsg"
                    />
                    <i
                        @tap.stop="toRest('alipay_number')"
                        class="iconfont icon-jia-bold rotate-45"
                        v-if="form.alipay_number"
                    ></i>
                </view>
                <view class="flex-between">
                    <view class="item-text">支付宝账号姓名</view>
                    <input
                        v-model="form.alipay_name"
                        type="text"
                        class="item-input flex-1"
                        :class="[{ 'mr-md': form.alipay_name }]"
                        maxlength="20"
                        :placeholder="rule[1].errorMsg"
                    />
                    <i
                        @tap.stop="toRest('alipay_name')"
                        class="iconfont icon-jia-bold rotate-45"
                        v-if="form.alipay_name"
                    ></i>
                </view>
                <view class="flex-center mt-lg pt-md pb-lg">
                    <view
                        @tap.stop="submit"
                        class="bind-btn flex-center f-title c-base radius"
                        :style="{ background: primaryColor }"
                        >立即绑定</view
                    >
                </view>
            </view>
        </view>
        <view class="pd-lg">
            <view class="f-title text-bold mb-md">支付宝账号获取：</view>
            <view class="f-paragraph c-desc mt-md mb-md">1)、打开【支付宝】-【我的】页面</view>
            <image
                mode="widthFix"
                class="item-image radius-16"
                src="https://lbqny.migugu.com/admin/anmo/mine/alipay-0.jpeg"
            >
            </image>
            <view class="f-paragraph c-desc mt-md mb-md">2)、打开上图箭头所示，个人信息页面</view>
            <image
                mode="widthFix"
                class="item-image radius-16"
                src="https://lbqny.migugu.com/admin/anmo/mine/alipay-1.jpeg"
            >
            </image>
            <view class="fill-base pd-lg mt-lg radius-26">
                <view class="f-title text-bold mb-md">身份信息</view>
                <view class="f-paragraph c-title mb-md"
                    >根据相关法律法规要求，请保持身份信息完整，以便使用支付宝相关功能</view
                >
                <image
                    mode="widthFix"
                    class="radius-16"
                    src="https://lbqny.migugu.com/admin/anmo/mine/alipay-2.jpeg"
                >
                </image>
            </view>
        </view>

        <view class="space-footer"></view>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    components: {},
    data() {
        return {
            isLoad: false,
            options: {},
            form: {
                alipay_number: "",
                alipay_name: "",
            },
            rule: [
                {
                    name: "alipay_number",
                    checkType: "isNotNull",
                    errorMsg: "请输入您的支付宝账号",
                    regType: 2,
                },
                {
                    name: "alipay_name",
                    checkType: "isNotNull",
                    errorMsg: "请输入您的支付宝账号姓名",
                    regType: 2,
                },
            ],
            lockTap: false,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        userInfo: (state) => state.user.userInfo,
        location: (state) => state.user.location,
    }),
    async onLoad(options) {
        this.$util.showLoading();
        this.options = options;
        await this.initIndex();
        this.isLoad = true;
    },
    methods: {
        ...mapActions(["getConfigInfo", "getUserInfo"]),
        ...mapMutations(["updateUserItem"]),
        async initIndex(refresh = false) {
            // #ifdef H5
            if (!refresh && this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            let { alipay_number = "", alipay_name = "" } = this.userInfo;
            this.form.alipay_number = alipay_number;
            this.form.alipay_name = alipay_name;
            this.$util.hideAll();
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
        },
        initRefresh() {
            this.initIndex(true);
        },
        toRest(key) {
            this.$nextTick(() => {
                this.form[key] = "";
            });
        },
        //表单验证
        validate(param) {
            let validate = new this.$util.Validate();
            this.rule.map((item) => {
                let { name } = item;
                validate.add(param[name], item);
            });
            let message = validate.start();
            return message;
        },
        async submit() {
            let param = this.$util.deepCopy(this.form);
            let msg = this.validate(param);
            if (msg) {
                this.$util.showToast({
                    title: msg,
                });
                return;
            }
            if (this.lockTap) return;
            this.lockTap = true;

            this.$util.showLoading();
            try {
                await this.$api.mine.bindAlipayNumber(param);
                this.$util.hideAll();
                this.$util.showToast({
                    title: `绑定成功`,
                });
                setTimeout(() => {
                    this.$util.back();
                    this.$util.goUrl({
                        url: 1,
                        openType: `navigateBack`,
                    });
                }, 1000);
            } catch (e) {
                setTimeout(() => {
                    this.lockTap = false;
                    this.$util.hideAll();
                }, 2000);
            }
        },
    },
};
</script>

<style lang="scss">
.apply-pages {
    .apply-form {
        .item-text {
            width: 250rpx;
        }
    }

    .bind-btn {
        width: 600rpx;
        height: 80rpx;
    }

    .item-image {
        width: 690rpx;
    }
}
</style>
